// 为了省事,在react脚手架创建的项目中写.但是此时的代码和react没有关系
// 1. 创建store对象
// 引入创建store对象的方法
import { createStore } from 'redux'
// 定义一个初始数据
const initState = { count: 0, msg: 'hello' }
// 创建
// const store = createStore(reducer函数)
// store对象中默认值是undefined.如果要初始化数据,去reducer中初始化
const store = createStore(reducer)

// 2. 定义reducer函数
// 假设state的数据是这样的: {count:0,msg: 'hello'}

// reducer函数的执行时机:
// 1. createStore的时候,reducer函数会自动被调用. 调用的目的就是为了初始化数据
// 2. 调用store.dispatch的时候,reducer会被执行. 目的就是为了改数据
function reducer(state = initState, action) {
  //   console.log('reducer执行了', state, action)
  //第一次reducer执行的时候,action对象 {type: '@@redux/INITk.p.p.p.5'}
  //state就是store中存储的数据
  //action 就是需求对象 {type:'increment'}
  switch (action.type) {
    case 'increment':
      const newState = {
        ...state, //写这一行代码,是为了保留其他数据
        // count: 0,
        // msg: 'hello'
        count: state.count + 1,
      }
      //   reducer函数中return什么,则store里的数据就被改成了什么
      return newState

    case 'decrement':
      return {
        ...state,
        count: state.count - 1,
      }
    // 一个reducer函数中,不管有多少个case.但是至少有一个default.而且必须return state
    // 写default的目的,就是为了初始化数据
    default:
      return state
  }
}

// 3. 获取redux里面的数据
console.log('初始化数据之后: ', store.getState())
// 4. 监听store中数据的变化
store.subscribe(() => {
  // 当store中数据发生变化的时候执行
  console.log(store.getState())
})

// 5. 修改数据 - 我们传入的action对象,会传递给reducer函数的第二个形参
store.dispatch({ type: 'increment' })

// console.log('第一次修改之后(+): ', store.getState())
store.dispatch({ type: 'decrement' })
// console.log('第二次修改之后(-): ', store.getState())
